<template>
    <view class="popup" @click.self="close">
        <view class="popup-con">
			<image :src='popData.icon'></image>
            <p>{{popData.title}}</p>
			<view class="popup-con-text">{{popData.content}}</view>
			<view class="popup-con-btn">
				<view @click.stop="done" v-if='popData.btnText && popData.btnText.length == 1' class="left">{{popData.btnText[0]}}</view>
				<template v-if='popData.btnText && popData.btnText.length > 1'>
					<view class="left" @click.stop="close">{{popData.btnText[0]}}</view>
					<view class="right" @click.stop="done">{{popData.btnText[1]}}</view>
				</template>
			</view>
        </view>
    </view>
</template>
<script>
export default{
	props:{
		popData:{
			type:Object,
			default:()=>{}
		}
	},
    methods:{
        done(){
            this.$emit("done")
			this.close()
        },
		close(){
			this.$emit("close")
		}
    }
}
</script>

<style  scoped lang="scss">
	.popup{
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(20,20,22,0.3);
		&-con{
			width: 92%;
			border-radius: 20rpx;
			padding: 40rpx 50rpx 60rpx 50rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 110rpx;
				height: 110rpx;
			}
			p{
				font-weight: 500;
				font-size: 40rpx;
				margin-top: 40rpx;
			}
			&-text{
				font-size: 14px;
				color: #7F7F7F;
				line-height: 50rpx;
				margin: 40rpx 0 60rpx 0;
			}
			&-btn{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				line-height: 32rpx;
				.left{
					width: 188rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: rgba(255,255,255,0.2);
					border-radius: 30rpx;
					border: 2rpx solid #7F7F7F;
				}
				.right{
					width: 188rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #1A7B99;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #fff;
					margin-left: 24rpx;
				}
			}
		}
	}
</style>
